<template>
    <el-dialog title="集合详情" v-model="visible" width="600px" @closed="close">
      <div class="dialog-content">
        <table class="table table-border" >
          <div v-for="(fieldsData, index) in tableData" :key="index">
            <thead>
        <tr prop="form_name">
          <div><div style="line-height: 35px;float: left;"> 表名:</div>
          <input type="text" v-model="fieldsData.form_name"  style="line-height:35px;font-size: 15px;">
        </div>
        </tr>
        <tr>
            <th v-for="(item, index) in formName.fieldsName" :key="index">
              <input v-model="item.field_name">
            </th>
          </tr>
    </thead>
    <tbody >        
            <tr>
            <td prop="field_name">
              <input v-model="fieldsData.fields[0].field_name">
            </td>
            <td prop="field_type">
              <!-- <input type="text" v-model="fieldsData.fields[0].field_type"> -->
              <select @change="handleFieldTypeChange($event.target.value,index)" class="selectFrame" v-model="selectedFieldType[index]">
              <option v-for="(item, index) in fieldTypes" :key="index" :value="item">{{ item }}</option>
              </select>
            </td>
            <td prop="field_description">
              <input type="text" v-model="fieldsData.fields[0].field_description">
            </td>
          </tr>
        <tr v-for="(row, rowIndex) in formName.rows" :key="rowIndex">
            <td v-for="(field, fieldIndex) in formName.fieldsName" :key="fieldIndex">
              <input v-model="row[field.field_name]" />
            </td>
          </tr>
    </tbody>
    <div class="btnBox">
        <button class="btn bg-blue" @click="addRow">+ Add Row</button>
        <button class="btn bg-blue" @click="addColumn">+ Add Column</button>
      </div>
          </div>
    

</table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 认</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script lang='ts' setup>
  import { ref, defineExpose, onMounted, reactive } from 'vue';
  import { inject } from 'vue'

 const visible = ref(false)
 const tableData = inject<{ _rawValue: { fields: { field_name: string, field_type: string, field_description: string }[] }[] ,form_name: string}>('tableData')
 const emit = defineEmits(['submit']);
 const selectedFieldType: string[] = reactive([]);

 const fieldTypes= [ '字符串','数字','test','test1']
 const fieldsData: { 
  form_name: string, 
  fields: { 
  field_name: string, 
  field_type: string, 
  field_description: string }[] 
} = reactive({
  form_name: '',
  fields: [
    {
      field_name: '',
      field_type: '',
      field_description: ''
    }
  ]
});

const formName: { 
  fieldsName: { 
    field_name: string }[], 
    rows: { 
      [key: string]: string
     }[] 
    } = reactive({
  fieldsName: [
    { field_name: "字段名" },
    { field_name: "字段类型"},
    { field_name: "字段描述"}
  ],
  rows: [
  ]
});


 // 修改handleFieldTypeChange函数
const handleFieldTypeChange= (selectedValue,index) => {
  fieldsData.fields[0].field_type = fieldTypes[selectedValue];
      // selectedFieldType.push (fieldTypes[selectedValue]) 
      selectedFieldType.splice(index, 1, selectedValue);
      // console.log(fieldTypes[selectedValue])
      // console.log(selectedValue)
      // selectedFieldType[index] = fieldTypes[selectedValue]
      
  console.log(selectedFieldType)
  }
const handleTypeValue=(selectedValue,index)=>{
console.log(selectedValue)
      selectedFieldType[index] = fieldTypes[selectedValue]
      console.log(fieldTypes[selectedValue])
  
}
const addRow = () => {
  const newRow = {};
  formName.fieldsName.forEach((field) => {
    newRow[field.field_name] = "";
  });
  formName.rows.push(newRow);
};

const addColumn = () => {
  const newField = {
    field_name: "",
    field_type: "",
    field_description: ""
  };
  formName.fieldsName.push(newField);
  formName.rows.forEach((row) => {
    row[newField.field_name] = "";

  });
};

 
 // 打开
 function show(data) {
  const rawValue = tableData._rawValue;
  console.log(rawValue);
  console.log("长度");
  console.log(rawValue.length);
  
  for (let i = 0; i < rawValue.length; i++) {
    const fields = rawValue[i].fields;
    for (let j = 0; j < fields.length; j++) {
      const fieldType = fields[j].field_type;
      // handleTypeValue(fieldType);
      console.log(fieldType)
      handleFieldTypeChange(fieldType, i);
      handleTypeValue(fieldType, i);
    }
  }
  
   visible.value = true;
 }
 
 // 提交
 function submit() {
   emit('submit', formName.rows);
   visible.value = false;
 }
 
 // 关闭
 function close() {
   visible.value = false;
   selectedFieldType.splice(0, selectedFieldType.length);
 }

 defineExpose({
   show,
   submit,
   close,
   tableData
 });
 
 
   </script>
   
  
  <style>
    .el-dialog{
    width: 800px !important;
  }
  .dialog-content {
    height: 400px;
    overflow-y: scroll;
  }
  .dialog-footer{
    text-align: center;
  }
  input {
  border: 0px;
}
.selectFrame{
  width: 100%;
  height: 56px;
  border: none;
}
  </style>
  